<template>
  <div class="conforder-box">
    <head1></head1>
    <el-row class="time" type="flex" justify="end">
      <el-col><div class="time1"><img src="../assets/img/shopcar/time2.png"></div></el-col>
    </el-row>
    <el-row class="goods-message"><el-divider><span><i class="el-icon-shopping-cart-2"></i>&nbsp;&nbsp;请确认订单</span></el-divider></el-row>
    <el-row type="flex" justify="center">
      <el-col :span="18">
        <div class="conf-bg">
    <el-row class="address-title" justify="center" type="flex">
      <el-col :span="4"><h2>请选择地址管理</h2></el-col>
    </el-row>
    <el-row>
      <el-col>
      <ul>
        <li v-for="item in address" :key="item.address_id" class="addr-card fl">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="text1">地址</span>
              <i class="el-icon-delete-solid"></i>
              <i class="el-icon-edit-outline"></i>
              <el-radio-group v-model="radio" @change="change(item.address_id)">
              <el-radio :label="item.address_id">选择</el-radio>
              </el-radio-group>
            </div>
            <p>收货人：{{item.user_name}}</p>
            <p>手机号码：{{item.address_phone}}</p>
            <h2>收货地址</h2>
            <p>所属地区：{{item.address_name}}</p>
            <p>详细地址：{{item.detailed_address}}</p>
          </el-card>
        </li>
      </ul>
      </el-col>
    </el-row>
    </div>
    <div class="conf-bg1">
      <el-row type="flex" justify="center">
        <el-col :span="18">
          <el-table :data="goods">
            <el-table-column>
              <template>
                <img :src="shoes_img" style="height: 100px;width: ;"/>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="shoes_name">
            </el-table-column>
            <el-table-column label="单价" prop="price">
            </el-table-column>
            <el-table-column label="数量" prop="shoes_num">
            </el-table-column>
            <el-table-column label="小计">
              <template slot-scope="scope">
                <span>{{scope.row.price*scope.row.shoes_num}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <el-row class="shopbtn" type="flex" justify="center">
      <div class="shopbtn-div tatal-goods">
      <el-col :span="16" :offset="1"><span class="keepshopping" @click="keepshopping">继续购物</span></el-col>
      <el-col :span="4"><p>总计：<span class="sums">￥{{tatal | keepTwoNum}}</span></p></el-col>
      <el-col :span="3"><div class="settlement fl" @click="dialogVisible=true">付款</div></el-col>
      </div>
    </el-row>
    </el-col>
    </el-row>
    <el-dialog title="请选择付款" :visible.sync="dialogVisible" width="25%">
      <template>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="支付宝支付" name="first">
            <center><img src="../assets/img/zfb.jpg" style="height: 280px;width: 250px;"/></center>
            <center style="margin-top: 20px;">
              <el-button type="danger" @click="dialogVisible=false">取消</el-button>
              <el-button type="primary" @click="addOrderzfb">确定</el-button>
            </center>
          </el-tab-pane>
          <el-tab-pane label="微信支付" name="second">
            <center><img src="../assets/img/wx.png" style="height: 280px;width: 250px;"/></center>
            <center style="margin-top: 20px;">
              <el-button type="danger" @click="dialogVisible=false">取消</el-button>
              <el-button type="primary" @click="addOrderwx">确定</el-button>
            </center>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-dialog>
    <footer1></footer1>
  </div>
</template>
<script>
import head1 from '@/components/head'
import footer1 from '@/components/footer'
import http from '@/utils/HttpUtil'
export default {
  filters: {
    keepTwoNum (value) {
      value = Number(value)
      return value.toFixed(2)
    }
  },
  data () {
    return {
      action: {
        selectUserAddress: 'shoes_Web_exploded/Address/selectAddressById',
        addOrder: 'shoes_Web_exploded/Order/addOrder',
        addShopOrder: 'shoes_Web_exploded/Order/addShopOrder'
      },
      activeName: 'first',
      radio: 1,
      address: [],
      userId: '',
      shoes_num: 0,
      shoes_id: '',
      size: '',
      shoes_img: '',
      price: '',
      shoes_name: '',
      goods: [],
      tatal: 0,
      dialogVisible: false,
      pay_type1: 1,
      pay_type2: 2,
      addressId: ''
    }
  },
  components: {
    head1,
    footer1
  },
  computed: {

  },
  methods: {
    getListId () {
      this.userId = sessionStorage.getItem('user_id')
      this.shoes_num = sessionStorage.getItem('shoes_num')
      this.shoes_id = sessionStorage.getItem('shoes_id')
      this.size = sessionStorage.getItem('radio')
      this.shoes_img = sessionStorage.getItem('shoes_img')
      this.shoes_name = sessionStorage.getItem('shoes_name')
      this.price = sessionStorage.getItem('price')
      let params = {
        'shoes_num': this.shoes_num,
        'shoes_id': this.shoes_id,
        'size': this.size,
        'shoes_img': this.shoes_img,
        'shoes_name': this.shoes_name,
        'price': this.price
      }
      this.tatal = params.shoes_num * params.price
      this.goods.push(params)
      console.log(this.goods)
    },
    addOrderzfb () {
      // eslint-disable-next-line
      if (this.addressId != '') {
        let params = {
          'shoes_id': this.shoes_id,
          'address_id': this.addressId,
          'pay_type': this.pay_type1
        }
        http.xhrPost(this, this.action.addOrder, params, (res) => {
          this.$message({
            type: 'success',
            message: res.message
          })
          this.addShopOrder()
          this.dialogVisible = false
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请选择地址'
        })
      }
    },
    addOrderwx () {
      // eslint-disable-next-line
      if (this.addressId != '') {
        let params = {
          'shoes_id': this.shoes_id,
          'address_id': this.addressId,
          'pay_type': this.pay_type2
        }
        http.xhrPost(this, this.action.addOrder, params, (res) => {
          this.$message({
            type: 'success',
            message: res.message
          })
          this.addShopOrder()
          this.dialogVisible = false
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请选择地址'
        })
      }
    },
    addShopOrder () {
      let params = {
        'shoes_id': this.shoes_id,
        'shoes_num': this.shoes_num
      }
      http.xhrPost(this, this.action.addShopOrder, params, (res) => {
        this.$message({
          type: 'success',
          message: res.message
        })
      })
    },
    change (id) {
      this.addressId = id
    },
    getUserAddress () {
      http.xhrPost(this, this.action.selectUserAddress + '/' + this.userId, null, (res) => {
        this.address = res.data
      })
    },
    keepshopping () {
      this.$router.push('/home')
    },
    topay () {
    }
  },
  mounted () {
    this.getListId()
    this.getUserAddress()
  }
}
</script>

<style lang="scss">
@import '../assets/style/common.scss';
  .conforder-box{
    background: #f4f4f4;
    .shopbtn {
      margin: 30px 0px 30px 0px;
      .shopbtn-div{
        height: 60px;
        width: 100%;
        background-color: white;
        line-height: 60px;
        vertical-align: middle;
        .keepshopping {
          height: 100%;
          color: #757575;
          font-size: 16px;
          color: $red;
          cursor: pointer;
        }
        .sums {
          font-size: 26px;
          color: $red;
        }
        p {
          color: $red;
        }
        .settlement {
          height: 100%;
          width: 100%;
          background: #e0e0e0;
          color: #b0b0b0;
          text-align: center;
          &:hover {
            background-color: $red;
            color: white;
            cursor: pointer;
          }
        }
      }
    }
    .time {
          margin-bottom: 20px;
          .time1 {
            background-color: white;
            height: 106px;
            width: 100%;
            position: relative;
            img {
              position: absolute;
              width: 419px;
              height: 46px;
              right: 150px;
              top: 30px;
            }
        }
        }
    .goods-message {
      margin-top: 20px;
      i {
        font-size: 24px;
      }
      span {
        font-size: 24px;
        color: $red;
      }
    }
    .address-title {
      margin: 25px 0px 20px 0px;
      h2 {
        margin-top: 20px;
        font-size: 24px;
        font-weight: bold;
        color: $red;
      }
    }
    .addr-card {
      width: 30%;
      margin: 0 0 20px 20px;
      line-height: 30px;
      .box-card {
        .clearfix {
          .text1 {
            margin-right: 130px;
          }
          i {
            color: $red;
            margin-right: 10px;
            cursor: pointer;
            font-size: 18px;
          }
      }
      }
    }
    .conf-bg {
      background-color: white;
    }
    .conf-bg1 {
      margin-top: 30px;
      background-color: white;
    }
  }
</style>
